<template>
    <div>
        <!-- 面包屑 -->
        <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item :to="{ path: '/' }">教师</el-breadcrumb-item>
            <el-breadcrumb-item>校内实践课题</el-breadcrumb-item>
            <el-breadcrumb-item>学生选题情况</el-breadcrumb-item>
        </el-breadcrumb>

        <h2 style="border-bottom: 1px solid;padding-bottom: 10px;">学生选题情况</h2>

        <!-- 主要内容 -->

        <div style="margin:3% 3% 3% 3%;border: 1px solid #e0e0e0; border-radius: 5px;">
            <!-- 选择班级后刷新下方表格 -->
            <!-- 表格1 -->
            <div style="margin: 3% 5% 3% 5%;height: 30%;">
                <h1>选择班级</h1>
                <div style=" width: 100%; margin: 2% 3% 1% 3%; height: 50%;">
                    <el-table :data="mySchema" height="150" style="width: 100%; margin-top: 10px;">
                        
                        <el-table-column prop="courseName" label="实践课程" />
                        <el-table-column prop="teachName" label="任课老师" />
                        <el-table-column prop="majorName" label="专业名称" />
                        <el-table-column prop="className" label="班级" />
                        <el-table-column prop="onloadDate" label="时间" :formatter="formatDate" />
                        <el-table-column fixed="right" label="详情" width="120">
                            <template #default="scope">
                                <el-button link type="primary" size="small"
                                    @click="choiseClass(scope.row.practicalId, scope.row.courseName, scope.row.className)">选择</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

            </div>



            <!-- 学生选题情况表格 -->
            <div style="margin: 3% 5% 3% 5%;">

                <h1>选题状况</h1>
                <div v-if="getInfo != ''">

                    <div>
                        <el-text size="small">已选中实践：{{ selectInfo.courseName }}</el-text><br />
                        <el-text size="small">已选中班级：{{ selectInfo.className }}</el-text>
                    </div>

                    <div style=" width: 100%; margin: 2% 3% 1% 3%; height: 50%;">
                        
                        <el-table   @selection-change="ea" height="250" :data="getInfo" style="width: 100%;">
                            <!-- <el-table-column prop="stuId" label="学生ID" />
                            <el-table-column prop="stuName" label="姓名" />
                            <el-table-column prop="topicState" label="选提情况" />
                            <el-table-column prop="teamId" label="队伍编号" />
                            <el-table-column prop="typeStr" label="实践类型" />
                            <el-table-column prop="taskName" label="题目名" /> -->
                            <el-table-column prop="courseName" label="实践课程" />
                            <el-table-column prop="stuName" label="姓名" />
                            <el-table-column prop="className" label="班级" />
                            <el-table-column prop="teamId" label="队伍编号" :formatter="formateTeam" />
                            <el-table-column prop="taskName" label="选题" :formatter="formateTask" />
                            <el-table-column prop="startDate" label="开始时间" :formatter="formatDate" />
                            <el-table-column prop="endDate" label="结束时间" :formatter="formatDate" /> -->
                            <!-- <template #default="scope">
                                <el-popover placement="right" :width="400" trigger="click">
                                    <template #reference>
                                        <el-button link type="primary" size="small"
                                            style="margin-right: 16px">详情</el-button>
                                    </template>
                                    <el-table :data="teamInfo">
                                        <el-table-column property="sutId" label="学号" />
                                        <el-table-column property="stuName" label="姓名" />
                                        <el-table-column property="stuPhone" label="电话" />
                                    </el-table>
                                </el-popover>
                            </template>-->
                        </el-table>
                    </div>
                </div>


            </div>

            <!-- 提示选择任务 -->
            <div v-if="getInfo.length == 0" style="background-color: #F5F7FA;">
                <h1
                    style="font-size: 32px; font-weight: bold; margin-top: 3%; text-align: center; background-color: #F5F7FA;">
                    请先选择实践课题任务</h1>
            </div>
        </div>


    </div>
</template>
<script setup>
import { ref, onBeforeMount } from 'vue';
import requests from '@/api/ajax';

onBeforeMount(() => {
    const asd = requests({ url: "/inner/practicalTaskInnerVos", method: "get", }).then(res => {
        const abc = res.rdata
        mySchema.value = abc

    })
        .catch(err => {
            console.error(err);
        });
})

//教师所有教学大纲的存放地
const mySchema = ref([{
    practicalId: '',
    classId: "",
    className: "",
    adviserId: '',
    adviserName: "",
    teachId: '',
    teachName: "",
    practicalType: '',
    onloadDate: "",
    courseSchema: '',
    planId: '',
    courseId: '',
    courseName: "",
    startDate: '',
    majorName: "",
    enrolDate: ""

}])

// 学生选题状况
const getInfo = ref([

])


let selectInfo = ref({
    courseName: '',
    className: '',
})

const teamInfo = ref([
    {
        stuName: '王五',
        sutId: '201919164217',
        stuPhone: '18177777777'
    },
    {
        stuName: '张三',
        sutId: '201919164218',
        stuPhone: '18177777777'
    },
    {
        stuName: '李四',
        sutId: '201919164219',
        stuPhone: '18177777777'
    },
])

//将表格中的实践规范为YY-MM-DD
function formatDate(row, column, cellValue, index) {
    if (cellValue != null) {
        let format = 'YYYY-mm-dd'
        let date = new Date(cellValue);
        const dataItem = {
            'Y+': date.getFullYear().toString(),
            'm+': (date.getMonth() + 1).toString(),
            'd+': date.getDate().toString(),
        }
        Object.keys(dataItem).forEach((item) => {
            const ret = new RegExp(`(${item})`).exec(format);
            if (ret) {
                format = format.replace(ret[1], ret[1].length === 1 ? dataItem[item] : dataItem[item].padStart(ret[1].length, '0'));
            }
        });
        return format
    } else {
        return null
    }


}

//提示未组队
function formateTeam(row, column, cellValue, index) {
    if (cellValue == 0) {
        const noTeam = '未组队'
        return noTeam
    } else {
        return cellValue
    }
}

//提示未选题
function formateTask(row, column, cellValue, index) {
    if (cellValue == null) {
        const noTask = '未选题'
        return noTask
    } else {
        return cellValue
    }
}

//选择班级获取班级信息
function choiseClass(id, courseName, className) {

    selectInfo.value.className = className;
    selectInfo.value.courseName = courseName;


    const asd = requests({ url: "/students/team/topicAoDetail/" + id, method: "get", }).then(res => {
        if (res.code === 20041) {
            getInfo.value = res.rdata
        } else {
            getInfo.value = null
        }
    })
        .catch(err => {
            console.error(err.data);
            // 登录请求失败后的操作
        });

}


</script>